<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../lib/hucais-area-select.umd.css">
</head>
<body>
<div id="app">
    <hucai-area-select
            v-bind:address-list="addressList"
            v-bind:root-address="rootAddress"
            v-on:load-data="loadData"
    />

    <div style="margin: 30px 0;"></div>
    <!--测试-->
    <span class="tag-group__title">测试加载后的所有数据：{{JSON.stringify(addressList)}}</span>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- import JavaScript -->
<script src="../lib/hucais-area-select.umd.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                addressList: [],//最终返回的值
                rootAddress: {
                    'id': '中华人民共和国',
                    'pid': 0,
                    'name': '中华人民共和国',
                    'level': 0,
                    'children': []
                }
            }
        }, methods: {
            loadData(node, appendData) {
                var that = this
                axios.get('/static/demo.json')
                    .then(function (data) { // 请求失败处理
                        var list = that.setData(data.data.RECORDS, node)
                        appendData(list, node)
                    })
                    .catch(function (error) { // 请求失败处理
                    })
            },
            //模拟设置数据
            setData(addlist, node) {
                var aList = []
                for (var i = 0; i < addlist.length; i++) {
                    var address = addlist[i]
                    address.children = []
                    if (address.pid === node.id) {//根据父id匹配数据
                        address.check = node.check//如果父是选中状态，则加载的节点也是选择状态
                        aList.push(address)
                    }
                }
                return aList;
            },
        }
    })
</script>
